<script setup>
import { ref } from 'vue';
const tableData = ref([])
// 新增一行
const addTableData = ()=>{
  const newRow = {
    type: null,
    days: null,
    amount: null
  }
  tableData.value.push(newRow)
}
// 删除
const deleteTableData = (row) =>{
  const index = tableData.value.indexOf(row);
  if (index !== -1) {
    tableData.value.splice(index, 1);
  }
}
</script>


<template>
    <div class="box">
  <el-table :data="tableData" border style="width: 88%;margin: 0 auto;">
    <el-table-column label="序号" align="center" width="80">
      <template #default="scope">
        <span>{{ scope.$index + 1 }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="type" label="交易类型" align="center" width="120">
      <template #default="scope">
        <el-select v-model="scope.row.type" style="width:90px" size="small" clearable>
          <el-option v-for="item in transType" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
      </template>
    </el-table-column>
    <el-table-column prop="days" label="考核天数" align="center" width="114">
      <template #default="scope">
        <el-input v-model="scope.row.days" size="small"></el-input>
      </template>
    </el-table-column>
    <el-table-column prop="amount" label="交易考核金额" align="center" width="120">
      <template #default="scope">
        <el-input v-model="scope.row.amount" size="small"></el-input>
      </template>
    </el-table-column>
    <el-table-column label="备注" align="center" width="120">
      <template #default="scope">
        <span>第{{ scope.$index + 1 }}次提交</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center" fixed="right" width="62">
      <template #default="scope">
        <el-button @click="deleteTableData(scope.row)" link icon="Delete" type="primary"></el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-icon @click="addTableData" class="icon" size="24" color="#fb7a14"><CirclePlusFilled /></el-icon>
</div>

</template>

<style scoped>

</style>